<template>

  <div>
    <header>
      影院
      <router-link tag="span" to="/city">
        <span class="position">
          {{cityname ? cityname : "北京"}}
          <van-icon name="arrow-down" id="arrow" />
        </span>
      </router-link>
      <van-icon name="search" id="search" />
    </header>
    <div class="meau">
      <van-dropdown-menu>
        <van-dropdown-item v-model="value1" :options="option1" />
        <van-dropdown-item v-model="value2" :options="option2" />
        <van-dropdown-item v-model="value3" :options="option3" />
      </van-dropdown-menu>
    </div>
    <div>

        <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
        <li v-for="item in datalist" :key="item.cinemaId">
          <p class="info">
            {{item.name}}
            <span class="price">
              ￥
              <span>{{item.lowPrice/100}}</span>起
            </span>
          </p>
          <p class="address">
            {{parseActors(item.address)}}
            <span>距离未知</span>
          </p>
        </li>
      </van-list>
    </div>
  </div>

</template>

<script>
import { DropdownMenu, DropdownItem } from "vant";
import Vue from "vue";
import { Icon, List } from "vant";
import VueCookies from "vue-cookies";
import uri from "@/config/uri";

Vue.use(DropdownMenu);
Vue.use(DropdownItem);
Vue.use(VueCookies);
Vue.use(Icon);
Vue.use(List);

export default {
  data() {
    return {
      cityname: this.$cookies.get("cityName"),
      loading: false,
      finished: false,
      pageNum: 1,
      datalist: [],
      value1: 0,
      value2: "a",
      value3: "b",
      option1: [
        { text: "全城", value: 0 },
        { text: "新款商品", value: 1 },
        { text: "活动商品", value: 2 },
      ],
      option2: [
        { text: "APP订票", value: "a" },
        { text: "前台兑换", value: "b" },
      ],
      option3: [
        { text: "最近去过", value: "a" },
        { text: "离我最近", value: "b" },
      ],
    };
  },
  // created() {
  //   this.$http
  //     .get(uri.getCinemas + "?cityId=" + this.$cookies.get("cityId"))
  //     .then((res) => {
  //       // console.log(res.data.data);
  //       this.datalist = res.data.cinemas;
  //       console.log(res.data);
  //     });
  // },
  methods: {
    onLoad() {
      this.$http
        .get(
          uri.getCinemas +
            "?cityId=" +
            this.$cookies.get("cityId") +
            "&pageNum=" +
            this.pageNum
        )
        .then((res) => {
          if (this.pageNum <= Math.ceil(res.data.total / 10)) {
            this.datalist = [...this.datalist, ...res.data.cinemas];
            this.pageNum++;
          }else{
            this.finished = true
          }
          this.loading = false;

        });
    },
    parseActors(address){
      return address.length>18? address.substr(0,18) + "..." : address
    }
  },
};
</script>

<style lang="scss" scoped>
header {
  position: relative;
  height: 44px;
  line-height: 44px;
  text-align: center;
  font-size: 17px;
  color: #191a1b;
  .position {
    font-size: 13px;
    position: absolute;
    left: 20px;
  }
  #search {
    font-size: 20px;
    position: absolute;
    right: 20px;
    top: 10px;
  }
  #arrow {
    font-size: 12px;
    position: relative;
    top: 1px;
    right: -2px;
  }
}
li {
  position: relative;
  background-color: #fff;
  padding: 15px;
  list-style: none;
}
p {
  margin: 0;
}
.info {
  color: #191a1b;
  font-size: 15px;
  .price {
    float: right;
    font-size: 12px;
    color: #ff5f16;
    span {
      font-size: 15px;
    }
  }
}
.address {
  color: #797d82;
  font-size: 12px;
  margin-top: 5px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  // width: 212px;
  span {
    float: right;
  }
}
</style>